<template>
  <main class="flex flex-1 items-center flex-col mb-16">
    <div class="container mx-auto max-w-6xl mt-6 lg:mt-10 mb-6 px-3 space-y-3">
      <!-- 面包屑 -->
      <Breadcrumb />

      <!-- 内容 -->
      <div class="md:grid grid-cols-8 py-12 gap-12 px-3 sm:px-12 border-1 border-periwinkle-gray rounded-3xl bg-white">
        <!-- 内容的左边图片 -->
        <div class="col-span-3 hidden md:block opacity-100">
          <span style="
              box-sizing: border-box;
              display: inline-block;
              overflow: hidden;
              width: initial;
              height: initial;
              background: none;
              opacity: 1;
              border: 0;
              margin: 0;
              padding: 0;
              position: relative;
              max-width: 100%;
            "><span style="
                box-sizing: border-box;
                display: block;
                width: initial;
                height: initial;
                background: none;
                opacity: 1;
                border: 0;
                margin: 0;
                padding: 0;
                max-width: 100%;
              "><img style="
                  display: block;
                  max-width: 100%;
                  width: initial;
                  height: initial;
                  background: none;
                  opacity: 1;
                  border: 0;
                  margin: 0;
                  padding: 0;
                " alt="" aria-hidden="true"
                src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27512%27%20height=%27512%27/%3e" /></span><img
              alt="Product at myWellaBee"
              src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2Fasdasdasdasdasdasdaf23e23423asd4.JPG&amp;w=1080&amp;q=75"
              decoding="async" data-nimg="intrinsic" style="
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                box-sizing: border-box;
                padding: 0;
                border: none;
                margin: auto;
                display: block;
                width: 0;
                height: 0;
                min-width: 100%;
                max-width: 100%;
                min-height: 100%;
                max-height: 100%;
              " srcset="
                https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2Fasdasdasdasdasdasdaf23e23423asd4.JPG&amp;w=640&amp;q=75  1x,
                https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2Fasdasdasdasdasdasdaf23e23423asd4.JPG&amp;w=1080&amp;q=75 2x
              " /></span>
        </div>

        <!-- 内容的右边 -->
        <div class="col-span-5 text-cape-cod space-y-6">
          <header class="flex items-center justify-between pb-3">
            <button type="button"
              class="relative flex whitespace-nowrap gap-2 items-center justify-center text-xs py-1.5 px-3 leading-3 border rounded-3xl shadow-sm font-bold opacity-100 text-cape-cod bg-transparent cursor-pointer border-cadet-blue shadow-sm focus:outline-none">
              <span>ALMIGHTY</span>
            </button>
            <div class="flex items-center gap-3">
              <span class="font-bold text-sm">Save to List</span>
              <div class="relative">
                <div>
                  <svg
                    class="w-9 h-9 p-3 rounded-full block cursor-pointer overflow-visible hover:opacity-80 border-1 bg-white border-periwinkle-gray text-ship-cove hover:text-ink"
                    width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink">
                    <title>Icons/Favourite</title>
                    <g id="Symbols" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
                      <g id="Icons/Favourite" stroke="currentColor" stroke-width="1.77776562">
                        <path
                          d="M11.3797479,1.9016384 C12.2593931,1.82772243 13.1694587,2.07401259 13.8998941,2.66251033 C14.6150127,3.2389481 15.0228778,4.0379554 15.0982833,4.86688089 C15.1733874,5.69249252 14.91801,6.54444712 14.3198577,7.22897411 L14.3198577,7.22897411 L10.9892335,11.0416475 C10.5774187,11.5130333 9.81036117,12.2976083 9.09320234,13.0173302 L9.09320234,13.0173302 L8.61703461,13.4930931 C8.39160066,13.7174101 8.18113491,13.9256076 7.99996791,14.1041782 C7.81883935,13.9255822 7.60840847,13.7174192 7.38425925,13.4943832 L7.38425925,13.4943832 L6.90818559,13.01872 C6.18963883,12.2976083 5.42258132,11.5130333 5.01078615,11.0416699 L5.01078615,11.0416699 L1.68005879,7.22887857 C1.08199004,6.54444712 0.826612633,5.69249252 0.901716679,4.86688089 C0.977122181,4.0379554 1.38498728,3.2389481 2.09994144,2.6626429 C2.83054129,2.07401259 3.74060695,1.82772243 4.62025215,1.9016384 C5.49667886,1.97528393 6.34568326,2.36719062 6.9565112,3.06662907 L6.9565112,3.06662907 L8.00000009,4.26049085 L9.04373198,3.06635073 C9.65431674,2.36719062 10.5033211,1.97528393 11.3797479,1.9016384 Z"
                          id="Path"></path>
                      </g>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
          </header>
          <div class="md:hidden flex flex-row justify-center opacity-100">
            <span style="
                box-sizing: border-box;
                display: inline-block;
                overflow: hidden;
                width: initial;
                height: initial;
                background: none;
                opacity: 1;
                border: 0;
                margin: 0;
                padding: 0;
                position: relative;
                max-width: 100%;
              "><span style="
                  box-sizing: border-box;
                  display: block;
                  width: initial;
                  height: initial;
                  background: none;
                  opacity: 1;
                  border: 0;
                  margin: 0;
                  padding: 0;
                  max-width: 100%;
                "><img style="
                    display: block;
                    max-width: 100%;
                    width: initial;
                    height: initial;
                    background: none;
                    opacity: 1;
                    border: 0;
                    margin: 0;
                    padding: 0;
                  " alt="" aria-hidden="true"
                  src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27300%27%20height=%27200%27/%3e" /></span><img
                alt="ALMIGHTY Sparkling Water Blood Orange"
                src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2Fasdasdasdasdasdasdaf23e23423asd4.JPG&amp;w=640&amp;q=75"
                decoding="async" data-nimg="intrinsic" style="
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  box-sizing: border-box;
                  padding: 0;
                  border: none;
                  margin: auto;
                  display: block;
                  width: 0;
                  height: 0;
                  min-width: 100%;
                  max-width: 100%;
                  min-height: 100%;
                  max-height: 100%;
                  object-fit: contain;
                " srcset="
                  https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2Fasdasdasdasdasdasdaf23e23423asd4.JPG&amp;w=384&amp;q=75 1x,
                  https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2Fasdasdasdasdasdasdaf23e23423asd4.JPG&amp;w=640&amp;q=75 2x
                " /></span>
          </div>
          <h1 class="text-2xl lg:text-4xl font-black leading-none">
            ALMIGHTY Sparkling Water Blood Orange
          </h1>
          <div class="text-sm pb-6">
            <div>
              Bold and fruity, Almighty's Blood Orange Sparkling Water offers a
              zesty twist to your everyday hydration. There's no shame in
              drinking this refreshing treat because this sparkling water is
              completely sugar free and uses only natural blood orange flavour,
              made from real fruit.
            </div>
            <div>&nbsp;</div>
            <div>
              With 1 calorie per can, you can drink as much as you please. All
              Almighty sparkling water is activated charcoal filtered for
              purity. No sugar. No sweetener. Only natural flavours.
            </div>
          </div>
          <div class="flex flex-wrap gap-3">
            <h3 v-for="item in advantagesList" :key="item.id">
              <a
                class="border border-spindle text-ink bg-link-water rounded-lg font-bold p-2 text-xs flex flex-row items-center gap-3 leading-3 cursor-pointer select-none">{{
                item.name }}</a>
            </h3>
          </div>
          <div class="flex flex-row justify-between items-center">
            <div>
              <small class="text-tiny text-cadet-blue font-bold">Available from</small>
              <div class="text-2xl font-bold">$2.49</div>
            </div>
          </div>
          <div class="relative">
            <div class="flex flex-row items-center justify-end pb-3">
              <div class="relative">
                <div>
                  <button @click="sortBtn" type="button"
                    class="relative flex whitespace-nowrap gap-2 items-center justify-center text-xs py-1.5 px-3 leading-3 border rounded-3xl shadow-sm font-bold opacity-100 text-cape-cod bg-transparent cursor-pointer border-cadet-blue shadow-sm focus:outline-none">
                    <span>Sort by price</span><svg class="text-cape-cod h-3 w-3" width="16px" height="16px"
                      viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink">
                      <title>Icons/Chevron down</title>
                      <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                        stroke-linecap="round" stroke-linejoin="round">
                        <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
                          <polyline id="Path" points="14 5 8 11 2 5"></polyline>
                        </g>
                      </g>
                    </svg>
                  </button>
                </div>
                <!-- 展示按钮下拉 -->
                <div class="shade" @click="sortBtn" v-if="showDropDownRef">
                  <div class="absolute top-full mt-3 left-0">
                    <div class="bg-white overflow-hidden rounded-xl border-1 border-periwinkle-gray shadow">
                      <a v-for="item in categorySortList" :key="item.id" @click="categorySort(item.id)"
                        class="cursor-pointer px-5 py-3 flex flex-row items-center gap-3 hover:opacity-80 whitespace-nowrap capitalize"><span>{{
                        item.name }}</span></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <a v-for="item in drinkListRef" :key="item.id" target="_blank"
                class="flex flex-row items-center gap-3 border-t-1 border-gray-300 hover:bg-gray-100 transition-colors px-2 sm:px-4 py-2"
                :href="item.href">
                <div class="w-10 h-10 rounded-full overflow-hidden items-center justify-center flex">
                  <span style="
                      box-sizing: border-box;
                      display: inline-block;
                      overflow: hidden;
                      width: initial;
                      height: initial;
                      background: none;
                      opacity: 1;
                      border: 0;
                      margin: 0;
                      padding: 0;
                      position: relative;
                      max-width: 100%;
                    "><span style="
                        box-sizing: border-box;
                        display: block;
                        width: initial;
                        height: initial;
                        background: none;
                        opacity: 1;
                        border: 0;
                        margin: 0;
                        padding: 0;
                        max-width: 100%;
                      "><img style="
                          display: block;
                          max-width: 100%;
                          width: initial;
                          height: initial;
                          background: none;
                          opacity: 1;
                          border: 0;
                          margin: 0;
                          padding: 0;
                        " alt="" aria-hidden="true"
                        src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2770%27%20height=%2770%27/%3e" /></span><img
                      alt="Huckleberry" :src="item.imgUrl" decoding="async" data-nimg="intrinsic" style="
                        position: absolute;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        box-sizing: border-box;
                        padding: 0;
                        border: none;
                        margin: auto;
                        display: block;
                        width: 0;
                        height: 0;
                        min-width: 100%;
                        max-width: 100%;
                        min-height: 100%;
                        max-height: 100%;
                      " :srcset="item.imgUrl" /></span>
                </div>
                <div class="flex-1">
                  <div class="flex flex-wrap">
                    <h4 class="text-base text-gray-700 font-bold">
                      {{ item.name }}
                    </h4>
                  </div>
                  <small class="text-sm text-gray-700">{{ item.ml }}</small>
                  <small class="text-sm text-gray-400 ml-4" v-if="item.tip">{{
                  item.tip
                  }}</small>
                </div>
                <span class="flex flex-row items-center gap-2 bg-gray-100 py-1 px-2 rounded-md"><span
                    class="flex flex-row items-center"><small class="text-tiny">{{ item.NZD }}</small><span
                      class="font-bold ml-2">${{ item.money }}</span></span><svg width="14px" height="14px"
                    viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink">
                    <title>Group</title>
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g id="Group" fill="currentColor">
                        <path
                          d="M1.55555556,11.6666604 C1.55555556,12.0944394 1.90555556,12.4444403 2.33333333,12.4444403 L11.6666667,12.4444403 C12.0944444,12.4444403 12.4444444,12.0944394 12.4444444,11.6666604 L12.4444444,7.77776119 C12.4444444,7.35002116 12.7944444,7.00002022 13.2222222,7.00002022 C13.65,7.00002022 14,7.35002116 14,7.77776119 L14,12.4444403 C14,13.2999981 13.3,14 12.4444444,14 L1.55555556,14 C0.7,14 0,13.2999981 0,12.4444403 L0,1.55556126 C0,0.700003422 0.692222222,0 1.55555556,0 L6.22222222,0 C6.65,0 7,0.350000933 7,0.777781407 C7,1.20556033 6.65,1.55556126 6.22222222,1.55556126 L2.33333333,1.55556126 C1.90555556,1.55556126 1.55555556,1.90556219 1.55555556,2.33334111 L1.55555556,11.6666604 Z M9.33333333,1.55556126 C8.90555556,1.55556126 8.55555556,1.20556033 8.55555556,0.777781407 C8.55555556,0.350000933 8.90555556,0 9.33333333,0 L14,0 L14,4.66668067 C14,5.09445959 13.65,5.44446052 13.2222222,5.44446052 C12.7944444,5.44446052 12.4444444,5.09445959 12.4444444,4.66668067 L12.4444444,2.65223085 L5.34333333,9.75332201 C5.04,10.0566562 4.55,10.0566562 4.24666667,9.75332201 C3.94333333,9.44998787 3.94333333,8.95998656 4.24666667,8.65665242 L11.3477778,1.55556126 L9.33333333,1.55556126 Z"
                          id="Shape"></path>
                      </g>
                    </g>
                  </svg></span>
              </a>

              <div class="flex flex-row justify-center p-2" v-if="showAllRef" @click="showClick">
                <button type="button"
                  class="relative flex whitespace-nowrap gap-2 items-center justify-center text-xs py-1.5 px-3 leading-3 border rounded-3xl shadow-sm font-bold opacity-100 text-black disabled:bg-yellow bg-yellow hover:bg-yellow-light cursor-pointer border-yellow shadow-sm focus:outline-none">
                  <span>Show all</span>
                </button>
              </div>
            </div>
          </div>
          <div class="border-t border-white-lilac">
            <div class="border-b">
              <div @click="allergensClick" class="py-4 pr-4 flex items-center justify-between cursor-pointer">
                <div class="text-sm font-bold">Allergens</div>
                <!-- 符号 + -->
                <svg v-if="allergensShowRef" class="w-3 h-3" width="14px" height="14px" viewBox="0 0 14 14"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>Path Copy</title>
                  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Product" transform="translate(-1320.000000, -932.000000)" fill="currentColor"
                      fill-rule="nonzero">
                      <path
                        d="M1327.875,932.875 C1327.875,932.392 1327.483,932 1327,932 C1326.517,932 1326.125,932.392 1326.125,932.875 L1326.125,938.125 L1320.875,938.125 C1320.392,938.125 1320,938.517 1320,939 C1320,939.483 1320.392,939.875 1320.875,939.875 L1326.125,939.875 L1326.125,945.125 C1326.125,945.608 1326.517,946 1327,946 C1327.483,946 1327.875,945.608 1327.875,945.125 L1327.875,939.875 L1333.125,939.875 C1333.608,939.875 1334,939.483 1334,939 C1334,938.517 1333.608,938.125 1333.125,938.125 L1327.875,938.125 L1327.875,932.875 Z"
                        id="Path-Copy"></path>
                    </g>
                  </g>
                </svg>
                <!-- 符号 - -->
                <svg v-if="!allergensShowRef" class="w-3 h-3" width="14px" height="2px" viewBox="0 0 14 2" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>Path Copy</title>
                  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Product" transform="translate(-1320.000000, -708.000000)" fill="currentColor"
                      fill-rule="nonzero">
                      <path
                        d="M1320.875,708 C1320.392,708 1320,708.392 1320,708.875 C1320,709.358 1320.392,709.75 1320.875,709.75 L1333.125,709.75 C1333.608,709.75 1334,709.358 1334,708.875 C1334,708.392 1333.608,708 1333.125,708 L1320.875,708 Z"
                        id="Path-Copy"></path>
                    </g>
                  </g>
                </svg>
              </div>
              <div class="transition-all pb-4" v-if="!allergensShowRef">
                <div class="text-sm">
                  <div>No allergens stated</div>
                </div>
              </div>
            </div>
            <div class="border-b">
              <div @click="productClick" class="py-4 pr-4 flex items-center justify-between cursor-pointer">
                <div class="text-sm font-bold">Product ingredients</div>
                <svg v-if="productShowRef" class="w-3 h-3" width="14px" height="14px" viewBox="0 0 14 14" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>Path Copy</title>
                  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Product" transform="translate(-1320.000000, -932.000000)" fill="currentColor"
                      fill-rule="nonzero">
                      <path
                        d="M1327.875,932.875 C1327.875,932.392 1327.483,932 1327,932 C1326.517,932 1326.125,932.392 1326.125,932.875 L1326.125,938.125 L1320.875,938.125 C1320.392,938.125 1320,938.517 1320,939 C1320,939.483 1320.392,939.875 1320.875,939.875 L1326.125,939.875 L1326.125,945.125 C1326.125,945.608 1326.517,946 1327,946 C1327.483,946 1327.875,945.608 1327.875,945.125 L1327.875,939.875 L1333.125,939.875 C1333.608,939.875 1334,939.483 1334,939 C1334,938.517 1333.608,938.125 1333.125,938.125 L1327.875,938.125 L1327.875,932.875 Z"
                        id="Path-Copy"></path>
                    </g>
                  </g>
                </svg>
                <svg v-if="!productShowRef" class="w-3 h-3" width="14px" height="2px" viewBox="0 0 14 2" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>Path Copy</title>
                  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Product" transform="translate(-1320.000000, -708.000000)" fill="currentColor"
                      fill-rule="nonzero">
                      <path
                        d="M1320.875,708 C1320.392,708 1320,708.392 1320,708.875 C1320,709.358 1320.392,709.75 1320.875,709.75 L1333.125,709.75 C1333.608,709.75 1334,709.358 1334,708.875 C1334,708.392 1333.608,708 1333.125,708 L1320.875,708 Z"
                        id="Path-Copy"></path>
                    </g>
                  </g>
                </svg>
              </div>
              <div class="transition-all pb-4" v-if="!productShowRef">
                <div class="text-sm">
                  <div>
                    Activated charcoal filtered sparkling water base, natural
                    blood orange flavour
                  </div>
                </div>
              </div>
            </div>
            <div class="border-b">
              <div @click="nutritionalClick" class="py-4 pr-4 flex items-center justify-between cursor-pointer">
                <div class="text-sm font-bold">Nutritional information</div>
                <svg v-if="nutritionalShowRef" class="w-3 h-3" width="14px" height="14px" viewBox="0 0 14 14"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>Path Copy</title>
                  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Product" transform="translate(-1320.000000, -932.000000)" fill="currentColor"
                      fill-rule="nonzero">
                      <path
                        d="M1327.875,932.875 C1327.875,932.392 1327.483,932 1327,932 C1326.517,932 1326.125,932.392 1326.125,932.875 L1326.125,938.125 L1320.875,938.125 C1320.392,938.125 1320,938.517 1320,939 C1320,939.483 1320.392,939.875 1320.875,939.875 L1326.125,939.875 L1326.125,945.125 C1326.125,945.608 1326.517,946 1327,946 C1327.483,946 1327.875,945.608 1327.875,945.125 L1327.875,939.875 L1333.125,939.875 C1333.608,939.875 1334,939.483 1334,939 C1334,938.517 1333.608,938.125 1333.125,938.125 L1327.875,938.125 L1327.875,932.875 Z"
                        id="Path-Copy"></path>
                    </g>
                  </g>
                </svg>
                <svg v-if="!nutritionalShowRef" class="w-3 h-3" width="14px" height="2px" viewBox="0 0 14 2"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>Path Copy</title>
                  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Product" transform="translate(-1320.000000, -708.000000)" fill="currentColor"
                      fill-rule="nonzero">
                      <path
                        d="M1320.875,708 C1320.392,708 1320,708.392 1320,708.875 C1320,709.358 1320.392,709.75 1320.875,709.75 L1333.125,709.75 C1333.608,709.75 1334,709.358 1334,708.875 C1334,708.392 1333.608,708 1333.125,708 L1320.875,708 Z"
                        id="Path-Copy"></path>
                    </g>
                  </g>
                </svg>
              </div>
              <div class="transition-all pb-4" v-if="!nutritionalShowRef">
                <div>
                  <div class="overflow-x-scroll">
                    <div class="text-sm" style="min-width: 480px">
                      <div class="grid grid-cols-3 gap-2">
                        <div class="font-bold capitalize">nutritionType</div>
                        <div class="font-bold capitalize">
                          nutritionQuantityPerServing
                        </div>
                        <div class="font-bold capitalize">
                          nutritionQuantityPer100ml
                        </div>
                      </div>
                      <div v-for="item in nutritionalList" :key="item.id" class="grid grid-cols-3 gap-2"
                        style="line-height: 28px">
                        <div>{{ item.type }}</div>
                        <div>{{ item.perServing }}</div>
                        <div>{{ item.per100ml }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="space-y-2">
            <small class="text-tiny text-cadet-blue font-bold">Share this product</small>
            <div class="flex flex-row items-center gap-3 px-2">
              <button aria-label="facebook" class="react-share__ShareButton" style="
                  background-color: transparent;
                  border: none;
                  padding: 0;
                  font: inherit;
                  color: inherit;
                  cursor: pointer;
                ">
                <svg class="text-bay-of-many w-7.5 h-7.5 md:w-5 md:h-5" width="16px" height="16px" viewBox="0 0 16 16"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Icons/Facebook" fill="currentColor">
                      <path
                        d="M16,8 C16,3.5816 12.4184,-2.84217094e-14 8,-2.84217094e-14 C3.5816,-2.84217094e-14 0,3.5816 0,8 C0,11.9928 2.9256,15.3024 6.7504,15.9024 L6.7504,10.3128 L4.7184,10.3128 L4.7184,8 L6.7504,8 L6.7504,6.2376 C6.7504,4.2328 7.944,3.1256 9.772,3.1256 C10.6472,3.1256 11.5624,3.2816 11.5624,3.2816 L11.5624,5.2496 L10.5544,5.2496 C9.56,5.2496 9.2504,5.8664 9.2504,6.4992 L9.2504,8 L11.4688,8 L11.1144,10.312 L9.2504,10.312 L9.2504,15.9024 C13.0744,15.3024 16,11.9928 16,8 Z"
                        id="Path"></path>
                    </g>
                  </g>
                </svg></button><button aria-label="twitter" class="react-share__ShareButton" style="
                  background-color: transparent;
                  border: none;
                  padding: 0;
                  font: inherit;
                  color: inherit;
                  cursor: pointer;
                ">
                <svg class="text-bay-of-many w-7.5 h-7.5 md:w-5 md:h-5" width="16px" height="16px" viewBox="0 0 16 16"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Icons/Twitter" fill="currentColor">
                      <path
                        d="M8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 Z M9.359995,4.23924708 C9.001615,4.44905915 8.716495,4.78224724 8.548735,5.18722829 C8.380975,5.59220934 8.33998,6.04638133 8.43205,6.47943281 C7.69792,6.43919016 6.97972,6.23053477 6.3240925,5.86701703 C5.6684605,5.50349438 5.0900485,4.99323075 4.6264,4.36935153 C4.390294,4.81391076 4.3179655,5.3401858 4.424143,5.84102371 C4.530316,6.34186653 4.8070165,6.77961857 5.1979,7.06515632 C4.904167,7.05585366 4.6167835,6.96942252 4.36,6.81314755 L4.36,6.83874219 C4.3601755,7.30500764 4.50778,7.7568515 4.77778,8.11768672 C5.04778,8.47847271 5.4235615,8.72605165 5.8414,8.81838924 C5.5695145,8.89945534 5.2842505,8.91126825 5.00755,8.85284356 C5.125522,9.25423644 5.355256,9.60522757 5.6646085,9.85674413 C5.973961,10.1082607 6.3474565,10.2477515 6.73285,10.2556268 C6.349954,10.5847148 5.9115055,10.8279623 5.4425785,10.9715384 C4.9736515,11.1151145 4.483444,11.1561644 4,11.0923747 C4.84447,11.6851367 5.8270855,11.999557 6.8305,11.9980312 L6.8305,12 C10.22665,12 12.08425,8.92224441 12.08425,6.25351088 C12.08425,6.16589845 12.08425,6.07877823 12.07885,5.99264242 C12.44029,5.70644019 12.752185,5.35209223 13,4.94621537 C12.662995,5.10962731 12.30547,5.21680979 11.93935,5.26417956 C12.32482,5.01170812 12.61336,4.61464171 12.75115,4.14687504 C12.388765,4.38208979 11.992315,4.54788892 11.5789,4.63711086 C11.30053,4.31312208 10.93225,4.09855531 10.53112,4.02662945 C10.12999,3.95470358 9.718375,4.02943501 9.359995,4.23924708 Z"
                        id="Combined-Shape"></path>
                    </g>
                  </g>
                </svg></button><button aria-label="pinterest" class="react-share__ShareButton" style="
                  background-color: transparent;
                  border: none;
                  padding: 0;
                  font: inherit;
                  color: inherit;
                  cursor: pointer;
                ">
                <svg class="text-bay-of-many w-7.5 h-7.5 md:w-5 md:h-5" width="16px" height="16px" viewBox="0 0 16 16"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Icons/Pinterest" fill="currentColor" fill-rule="nonzero">
                      <g id="pinterest-svgrepo-com" transform="translate(0.000000, 0.000000)">
                        <path
                          d="M7.99975472,0 C3.58149658,0 0,3.58149658 0,7.99975472 C0,11.3889826 2.10858036,14.2833144 5.08433218,15.4491892 C5.01468379,14.8159774 4.95141166,13.8458049 5.11228963,13.1542258 C5.25747218,12.5303332 6.05009043,9.17789152 6.05009043,9.17789152 C6.05009043,9.17789152 5.8112259,8.69869104 5.8112259,7.9904356 C5.8112259,6.87753288 6.45571872,6.04763802 7.25863704,6.04763802 C7.94089696,6.04763802 8.27050056,6.5597008 8.27050056,7.17427424 C8.27050056,7.860458 7.833972,8.88654544 7.60835048,9.83807976 C7.41951504,10.6341314 8.00760248,11.283529 8.79286352,11.283529 C10.2147696,11.283529 11.3075626,9.7841268 11.3075626,7.620122 C11.3075626,5.70479139 9.93127128,4.36528617 7.96591152,4.36528617 C5.69007694,4.36528617 4.35351461,6.07265258 4.35351461,7.83740536 C4.35351461,8.52457008 4.61837466,9.2622544 4.94895926,9.66248736 C5.01468379,9.74194536 5.02400294,9.81159376 5.00487416,9.89203272 C4.94405444,10.1451213 4.80917201,10.6880844 4.78219552,10.7999142 C4.74737133,10.9455872 4.66644186,10.976978 4.51488305,10.9063486 C3.51577205,10.4413722 2.8908985,8.98071792 2.8908985,7.80699552 C2.8908985,5.2834677 4.72431869,2.96643266 8.17681864,2.96643266 C10.9519634,2.96643266 13.108611,4.94405444 13.108611,7.58676928 C13.108611,10.3437663 11.3703442,12.5622146 8.9571748,12.5622146 C8.1468992,12.5622146 7.38469088,12.1413813 7.12375464,11.6435425 C7.12375464,11.6435425 6.72254072,13.1713926 6.62542536,13.5456301 C6.44492808,14.2401521 5.95738941,15.1117378 5.63121915,15.6429294 C6.37969406,15.8744367 7.1752552,15.9995095 7.99975472,15.9995095 C12.418013,15.9995095 16,12.4175225 16,7.99975472 C16,3.58149658 12.418013,0 7.99975472,0"
                          id="Shape"></path>
                      </g>
                    </g>
                  </g>
                </svg>
              </button>
              <div class="flex items-center cursor-pointer gap-3 group-scope relative">
                <svg class="w-7.5 h-7.5 md:w-5 md:h-5 bg-bay-of-many rounded-full text-white p-1" width="16px"
                  height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink">
                  <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Icons/Link" fill="currentColor">
                      <path
                        d="M1.56369489,7.50450988 C1.78772739,6.3283393 2.89188753,5.52022209 4.0920616,5.52022209 L6.43640162,5.52022209 C6.85246196,5.52022209 7.19651186,5.17617219 7.19651186,4.76011184 C7.19651186,4.3440499 6.85246196,4 6.43640162,4 L4.17207321,4 C2.08377032,4 0.219502337,5.52822325 0.019473245,7.60852497 C-0.212560328,9.99287079 1.65970882,12.0011221 3.99604768,12.0011221 L6.43640162,12.0011221 C6.85246196,12.0011221 7.19651186,11.6571122 7.19651186,11.2410518 C7.19651186,10.8249915 6.85246196,10.4809416 6.43640162,10.4809416 L3.99604768,10.4809416 C2.46782603,10.4809416 1.2596508,9.08873966 1.56369489,7.50450988 Z M5.59627977,8.80069788 L10.396976,8.80069788 C10.8370399,8.80069788 11.1970921,8.44064566 11.1970921,8.00058183 C11.1970921,7.56051801 10.8370399,7.20046579 10.396976,7.20046579 L5.59627977,7.20046579 C5.15621594,7.20046579 4.79616372,7.56051801 4.79616372,8.00058183 C4.79616372,8.44064566 5.15621594,8.80069788 5.59627977,8.80069788 Z M9.5568542,4 L11.8211826,4 C13.9094855,4 15.781757,5.52822325 15.981786,7.60852497 C16.2058185,9.99287079 14.333547,12.0011221 11.9972081,12.0011221 L9.5568542,12.0011221 C9.14079385,12.0011221 8.79674395,11.6571122 8.79674395,11.2410518 C8.79674395,10.8249915 9.14079385,10.4809416 9.5568542,10.4809416 L11.9972081,10.4809416 C13.5254298,10.4809416 14.733605,9.08873966 14.4295609,7.50450988 C14.2055284,6.3283393 13.1013683,5.52022209 11.9011942,5.52022209 L9.5568542,5.52022209 C9.14079385,5.52022209 8.79674395,5.17617219 8.79674395,4.76011184 C8.79674395,4.3440499 9.14079385,4 9.5568542,4 Z"
                        id="Shape"></path>
                    </g>
                  </g>
                </svg><span
                  class="text-xs group-scope-hover:opacity-100 opacity-0 transition-opacity absolute whitespace-nowrap right-0 bg-white border-1 shadow-md px-2 rounded-lg -top-7 pointer-events-none">Copy
                  link</span>
              </div>
            </div>
          </div>
          <div class="flex flex-row gap-3 items-center">
            <button type="button"
              class="relative flex whitespace-nowrap gap-2 items-center justify-center text-xs py-1.5 px-3 leading-3 border rounded-3xl shadow-sm font-bold opacity-100 text-cape-cod bg-transparent cursor-pointer border-cadet-blue shadow-sm focus:outline-none">
              <span>Share Feedback</span>
            </button>
          </div>
          <div class="text-xs mt-6 leading-normal">
            Please remember that myWellaBee is a guide only, always check the
            label before consuming.<br />
            See our
            <!-- -->
            <a class="underline text-ship-cove hover:text-ink hover:underline" href="/terms-of-use">Terms of Use</a>
            <!-- -->for more details.
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Breadcrumb from "@/components/Breadcrumb/index.vue";
export default defineComponent({
  components: { Breadcrumb },
  setup() {
    const advantagesList = [
      { id: 1, name: "B Corporation Certified" },
      { id: 2, name: "Dairy Free" },
      { id: 3, name: "Low Carb" },
      { id: 4, name: "Made in New Zealand" },
      { id: 5, name: "No Added Sugars" },
      { id: 6, name: "No Artificial Preservatives" },
      { id: 7, name: "Vegan" },
      { id: 8, name: "No Artificial Flavours" },
      { id: 9, name: "No Artificial Sweeteners" },
      { id: 10, name: "Sugar Free" },
      { id: 11, name: "Vegetarian" },
      { id: 12, name: "Additive Free" },
    ];

    const drinkList = [
      {
        id: 1,
        name: "Huckleberry",
        ml: "330ml",
        tip: "",
        NZD: "NZD",
        money: "2.49",
        href: "https://www.huckleberry.co.nz/products/alm-sparkling-blood-orange-330",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FHuckleberry_62560e6.png&w=256&q=75",
      },
      {
        id: 2,
        name: "Farro Foods",
        ml: "330ml",
        tip: "",
        NZD: "NZD",
        money: "2.69",
        href: "https://www.farro.co.nz/shop/product/Grocery-33744",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2F18209067_1400931856634036_6605689701195965494_o_63899fc.jpg&w=256&q=75",
      },
      {
        id: 3,
        name: "Wholesome Market",
        ml: "330ml",
        tip: "May be out of stock",
        NZD: "NZD",
        money: "3.00",
        href: "https://wholesomemarket.com.au/almighty-blood-orange-sparkling-water-330ml",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FWHOLESOME_W_ICON_SQUARE_OLIVE_6430f34.jpg&w=256&q=75",
      },
      {
        id: 4,
        name: "Merivale Fresh Choice",
        ml: "330ml",
        tip: "",
        NZD: "NZD",
        money: "3.20",
        href: "https://merivale.store.freshchoice.co.nz/lines/almighty-blood-orange-water-330ml",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2Fimages%2520%25282%2529_6500616.png&w=256&q=75",
      },
      {
        id: 5,
        name: "Mount Whole Foods",
        ml: "330ml",
        tip: "May be out of stock",
        NZD: "NZD",
        money: "3.50",
        href: "https://www.mountwholefoods.co.nz/product/almighty-sparlking-water-blood-orange-330ml",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2Fmount%2520wholefoods_6267a50.png&w=256&q=75",
      },
    ];
    const pushDrinkList = [
      {
        id: 6,
        name: "Naturally Organic",
        ml: "330ml",
        tip: "",
        NZD: "NZD",
        money: "3.50",
        href: "https://www.huckleberry.co.nz/products/alm-sparkling-blood-orange-330",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FNaturally%2520organic_625609c.png&w=256&q=75",
      },
      {
        id: 7,
        name: "Harvey Street Merchant",
        ml: "330ml",
        tip: "",
        NZD: "NZD",
        money: "4.80",
        href: "https://www.huckleberry.co.nz/products/alm-sparkling-blood-orange-330",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FHarvey%2520Street%2520Merchant%2520logo_65224e9.jpg&w=256&q=75",
      },
      {
        id: 8,
        name: "Part and Parcel",
        ml: "330ml",
        tip: "",
        NZD: "NZD",
        money: "5.00",
        href: "https://www.huckleberry.co.nz/products/alm-sparkling-blood-orange-330",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2F251905273_1794643664061349_8993617678905191974_n_643120f.png&w=256&q=75",
      },
      {
        id: 9,
        name: "Huckleberry",
        ml: "6 x 330ml",
        tip: "May be out of stock",
        NZD: "NZD",
        money: "12.89",
        href: "https://www.huckleberry.co.nz/products/alm-sparkling-blood-orange-330",
        imgUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FHuckleberry_62560e6.png&w=256&q=75",
      },
    ];

    const nutritionalList = [
      { id: 1, type: "Energy", perServing: "4.3kJ", per100ml: "1.3kJ" },
      { id: 2, type: "Calories", perServing: "1cal", per100ml: "0.3cal" },
      { id: 3, type: "Protein", perServing: "0g", per100ml: "0g" },
      { id: 4, type: "Total Fat", perServing: "0g", per100ml: "0g" },
      { id: 5, type: "Saturated Fat", perServing: "0g", per100ml: "0g" },
      { id: 6, type: "Carbohydrates", perServing: "0g", per100ml: "0g" },
      { id: 7, type: "sugars", perServing: "0g", per100ml: "0g" },
      { id: 8, type: "Sodium", perServing: "0g", per100ml: "0g" },
    ];
    const drinkListRef = ref(drinkList);

    const categorySortList = [
      { id: 1, name: "Price" },
      { id: 2, name: "Retailer name" },
    ];
    const showDropDownRef = ref(false);
    const sortBtn = () => {
      showDropDownRef.value = !showDropDownRef.value;
    };

    // Show all  按钮
    const showAllRef = ref(true);
    const showClick = () => {
      showAllRef.value = false;
      drinkListRef.value.push(...pushDrinkList);
    };

    // 下拉框
    const categorySort = (id: number) => {
      if (id === 1) {
        // id 等于 1 按照价格排序
        drinkListRef.value.sort((a, b) => {
          return Number(a.money) - Number(b.money);
        });
      } else {
        // id 等于 2按照名称排序
        drinkListRef.value.sort((a, b) => {
          return a.name.localeCompare(b.name);
        });
      }
    };

    const allergensShowRef = ref(true);
    const allergensClick = () => {
      allergensShowRef.value = !allergensShowRef.value;
    };

    const productShowRef = ref(true);
    const productClick = () => {
      productShowRef.value = !productShowRef.value;
    };

    const nutritionalShowRef = ref(true);
    const nutritionalClick = () => {
      nutritionalShowRef.value = !nutritionalShowRef.value;
    };

    return {
      advantagesList,
      showDropDownRef,
      sortBtn,
      categorySortList,
      categorySort,
      drinkListRef,
      showAllRef,
      showClick,
      allergensShowRef,
      allergensClick,
      productClick,
      productShowRef,
      nutritionalClick,
      nutritionalShowRef,
      nutritionalList,
    };
  },
});
</script>

<style>

</style>
